<template>
	<view class="userInfo">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">编辑资料</block>
		</cu-custom>		
		<wx-auth :categroy="1"></wx-auth>
		<view class="list">
			<view class="line">
				<view class="title">个人资料</view>
				<view>
					<view>
						<text>姓名</text>
						<input type="text" v-model="UserInfo.name" placeholder="请填写收货人的姓名" />
					</view>
					<view>
						<text>性别</text>
						<view>
							<view class="sex">
								<radio-group class="uni-flex" name="gender" @change="changeSex">
									<label>
										<radio :class="['red', { checked: UserInfo.sex === '1' }]" value="1" :checked="UserInfo.sex === '1'"/>男</label>
									<label>
										<radio :class="['red', { checked: UserInfo.sex === '2' }]" value="2" :checked="UserInfo.sex === '2'"/>女</label>
								</radio-group>
							</view>
						</view>
					</view>
					<view>
						<text>QQ号</text>
						<input type="text" v-model="UserInfo.qq" placeholder="请填写您的QQ号码" />
					</view>
					<view>
						<text>微信</text>
						<input type="text" v-model="UserInfo.wechat_id" placeholder="请输入您的微信号" />
					</view>
					<view>
						<text>生日</text>
						<view>
							<picker :value="UserInfo.birthday" class="picker-item" mode="date" :start="startDate" :end="endDate" @change="dateChange">
								<view>{{ UserInfo.birthday }}</view>
							</picker>
						</view>
					</view>
					<view>
						<text>所在地</text>
						<!-- #ifdef MP-WEIXIN -->
						<picker mode="region" :value="UserInfo.address" @change="getCity">
							<view>{{ UserInfo.address[0] }} - {{ UserInfo.address[1] }} - {{ UserInfo.address[2] }}</view>
						</picker>						
						<!-- #endif -->
						<!-- #ifndef MP-WEIXIN -->
						<view :class="{ noAddr: !pickerText }" @click="showMulLinkageThreePicker">{{ pickerText ? pickerText : '请选择' }}</view>
						<!-- #endif -->
					</view>
					<view class="bind">
						<text>绑定手机</text>
						<navigator hover-class="none" url="/usercenter/bindPhone">
							<view>{{ UserInfo.phone }}</view>
						</navigator>
					</view>
					<view>
						<text>密码</text>
						<input type="text" v-model="UserInfo.password" :disabled="enable">
					</view>
				</view>
			</view>
		</view>
		<view class="btn">
			<button type="warn" :disabled="disabled" @click="EditUser">提交</button>
		</view>
		<!-- #ifndef MP-WEIXIN -->
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
		@onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
		<!-- #endif -->		
	</view>
</template>

<script>
	import { getUserInfo, EditUserInfo } from '@/common/api/users'
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker'
	import { mapGetters } from 'vuex'
	export default {
		name: 'dataEdition',
		components: {
			mpvueCityPicker
		},
		data() {
			return {
				disabled: false,
				citys: '请选择地址',
				themeColor: '#007AFF',
				cityPickerValueDefault: [0, 0, 0],
				pickerText: '',
				enable: true,
				UserInfo: {
					name: '',
					sex: '',
					qq: '',
					wechat_id: '',
					birthday: '',
					phone: '',
					password:'',
					address: []
				},
				data: {
					ticket: ''
				},
				params: {
					location_p: '',
					location_c: '',
					location_a: ''
				}
			}
		},
		onLoad(rst) {
			this.getInfo(rst.phone)
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			...mapGetters([
				'userInfo'
			])
		},
		methods: {
			getInfo(phone) {
				uni.showLoading({ mask: true })
				const currentDate = this.getDate({ format: true })
				this.data.uname = this.userInfo.uname
				this.data.ticket = this.userInfo.ticket
				console.log(this.data)
				getUserInfo(this.data).then(res => {
					console.log(JSON.stringify(res))
					uni.hideLoading()
					if (res.code !== 4001) {
						if (phone) res.data.phone = phone
						if (res.data.birthday === null) res.data.birthday = currentDate
						// #ifdef MP-WEIXIN
						if (res.data.address !== null) res.data.address = res.data.address.split(',')
						// #endif
						// #ifndef MP-WEIXIN
						if (res.data.address !== null) {
							res.data.address = res.data.address.replace(/,/ig, '-')
							this.pickerText = res.data.address
						}
						// #endif
						res.data.sex = res.data.sex.toString()
						this.UserInfo = res.data
						if (this.UserInfo.password === '未设置密码') {
							this.UserInfo.password = ''
							this.enable = false
						}
					} else {
						uni.showModal({
							content: res.msg,
							showCancel: false,
							success: rst => {
								if (rst.confirm) uni.navigateBack()
							}
						})
					}
				})
			},
			onCancel () {},
			// #ifdef MP-WEIXIN
			getCity(e) {
				this.UserInfo.address = e.detail.value
			},			
			// #endif
			// #ifndef MP-WEIXIN
            showMulLinkageThreePicker() {
                this.$refs.mpvueCityPicker.show()
            },			
            onConfirm(e) {
				this.cityPickerValueDefault = e.value
				this.pickerText = e.label
                this.UserInfo.address = e.label
            },			
			// #endif
			dateChange(e) {
				this.UserInfo.birthday = e.detail.value
			},
			EditUser() {
				// #ifndef MP-WEIXIN
				if (typeof this.UserInfo.address === 'string') this.UserInfo.address = this.UserInfo.address.split('-')
				// #endif
				const params = Object.assign({}, this.data, this.UserInfo)
				if (params.password === '已设置密码') delete params.password
				EditUserInfo(params).then(res => {
					if (res.code === 4000) {
						uni.showToast({
							title: res.message,
							success: () => {
								this.$store.commit('SET_PHONE', params.phone)
							}
						})						
					} else {
						uni.showModal({
							title: '编辑失败',
							showCancel: false
						})						
					}
				})
			},
			changeSex (e) {
				this.UserInfo.sex = e.detail.value
			},			
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;

				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="less" scoped>
	@import '../common/styles/variables.less';
	.userInfo {
		.top {
			background: '';
			color: white;
			display: flex;
			padding: 35upx 15px;
			& > view {
				&:first-of-type {
					width: 120upx;
					margin-right: 20upx;
					& > view {
						background-repeat: no-repeat;
						background-size: cover;
						background-position: top center;
						padding-top: 100%;
						border-radius: 50%;
					}
				}
				&:last-of-type {
					display: flex;
					flex-flow: column;
					flex-direction: column;
					justify-content: space-between;
					padding: 10upx 0;
					& > text {
						&.name {
							font-size: 26upx;
						}
						&.id {
							background: white;
							border-radius: 15upx;
							color: #0099ff;
							font-size: 22upx;
							padding: 5upx 20upx;
						}
					}
				}
			}
		}
		.list {
			.line {
				.title {
					height: 80upx;
					line-height: 80upx;
					font-size: 26upx;
					padding: 0 15px;
					& + view {
						padding: 0 15px;
						background-color: white;
						& > view {
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding: 20upx 0;
							&.bind {
								.arrowRight(#666, 0, 0);
							}
							&:last-of-type {
								&::after {
									display: none;
								}
							}
                            .border-bottom;
							& > text {
								font-size: 26upx;
								width: 120upx;
								text-align: justify;
								text-align-last: justify;
								padding-right: 30upx;
							}
							& > view,
							& > navigator {
								flex: 1;
								padding: 5upx 0;
								font-size: 26upx;
								color: black ;
								& > .sex {
									label {
										margin-right: 20upx;
										radio {
											margin-right: 10upx
										}								
									}
								}								
								&.noAddr { color:#929292 }
								&>.picker-item {
									font-size: 26upx;
									text-align: left;
									line-height: 1.5;
								}
							}
							& > picker {
								flex: 1;
							}
							& > input {
								font-size: 26upx;
								flex: 1;
							}
							&>picker {
								font-size: 26upx
							}
						}
					}
				}
			}
		}

		.btn {
			margin: 60upx 15px;
		}
	}
</style>
